<template>
  <div style="width: 20%">
    <div
      :id="'myChart' + index"
      style="width: 300px; height: 150px; margin-top: 20px"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, watchEffect, nextTick } from 'vue';
import * as echarts from 'echarts'; // 引入echarts
const props = defineProps({
  index: {
    type: Number,
    default: 0,
  },
  publicItem: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
// 初始化 echarts 图表
const echartsInit = (publicItem: any) => {
  nextTick(() => {
    // 找到容器
    const chartContainer = document.getElementById(`myChart${props.index}`);
    if (chartContainer) {
      const myChart = echarts.init(chartContainer);

      // 开始渲染
      myChart.setOption({
        // backgroundColor:"#061740",
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: '15%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
          position: 'center',
        },

        tooltip: {
          trigger: 'item',
          confine: true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
          formatter: (params) => {
            if (Number(params.data.value[0]) === 0) {
              params.data.value[0] = '低危';
            } else if (Number(params.data.value[0]) === 1) {
              params.data.value[0] = '中危';
            } else if (Number(params.data.value[0]) === 2) {
              params.data.value[0] = '高危';
            } else if (Number(params.data.value[0]) === 3) {
              params.data.value[0] = '超危';
            } else if (Number(params.data.value[0]) === -1) {
              params.data.value[0] = '未知';
            } else if (params.data.value[0] == undefined) {
              params.data.value[0] = '-';
            }
            if (Number(params.data.value[1]) === 0) {
              params.data.value[1] = '低';
            } else if (Number(params.data.value[1]) === 1) {
              params.data.value[1] = '中';
            } else if (Number(params.data.value[1]) === 2) {
              params.data.value[1] = '高';
            } else if (params.data.value[1] == undefined) {
              params.data.value[1] = '-';
            }
            if (Number(params.data.value[2]) === 0) {
              params.data.value[2] = '困难';
            } else if (Number(params.data.value[2]) === 1) {
              params.data.value[2] = '一般';
            } else if (Number(params.data.value[2]) === 2) {
              params.data.value[2] = '容易';
            } else if (params.data.value[2] == undefined) {
              params.data.value[2] = '-';
            }
            const str =
              '&nbsp;' +
              '暴露风险：' +
              params.data.value[0] +
              '<br/>' +
              '&nbsp;' +
              '资产暴露程度：' +
              params.data.value[1] +
              '<br/>' +
              '&nbsp;' +
              '易受攻击程度：' +
              params.data.value[2];
            return str;
          },
        },
        radar: {
          radius: '85%', // 大小
          nameGap: 1, // 图中工艺等字距离图的距离
          center: ['50%', '50%'], // 图的位置
          name: {
            textStyle: {
              color: '#000',
              fontSize: '10px',
            },
            formatter(name) {
              return name;
            },
          },
          indicator: [
            { max: 5, min: -1, name: '暴露风险' },
            { max: 3, min: -1, name: '资产暴露程度' },
            { max: 3, min: -1, name: '易受攻击程度' },
          ],
          axisLine: {
            lineStyle: {
              color: '#ccc', // 轴颜色
            },
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: '#ccc', // 图表背景的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.6,
              color: '#ccc', // 网格的颜色
            },
          },
        },
        series: [
          {
            name: '',
            type: 'radar',
            symbol: 'angle',
            itemStyle: {
              normal: {
                areaStyle: { type: 'default' },
              },
            },
            data: [
              {
                symbol: 'circle', // 圆点
                symbolSize: 2, // 圆点大小
                value: [
                  props.publicItem.exposureRisk,
                  props.publicItem.exposureLevel,
                  props.publicItem.vulnerability,
                ],
                areaStyle: { color: 'rgba(58, 125, 255, 0.3)' },
                itemStyle: {
                  normal: {
                    borderWidth: 0.9,
                    color: '#0289f7',
                    borderColor: '#0289f7',
                  },
                },
                lineStyle: {
                  color: '#0289f7',
                  width: 0.9,
                },
              },
            ],
          },
        ],
      });
    }
  });
};
watchEffect(() => {
  echartsInit(props.publicItem);
});
</script>

<style scoped>
/* #myChart {
  width: 200px;
  height: 200px;
} */
</style>
